<template>
  <a-card  hoverable style="width: 49vh;height: 71.5vh;display: inline-block;margin-left: 15px;margin-top: 15px" >
    <template #cover>
      <div class='title'>
        项目回收率

      </div>
      <a-divider />
      <div :id='barChart.id' class='main'></div>
    </template>
    <a-card-meta :title="barChart.client" />
    <a-row v-for='(item,index) in barChart.array' :key='index' style='font-size: 2vh' >
      <a-col :span="12">
        {{item.name}}
      </a-col>
      <a-col :span="12">
        {{item.value}}%
      </a-col>
    </a-row>
  </a-card>
</template>

<script>

export default {
  name: 'ProjectCard',
  props:{
    barChart:{
      type: Object,
      request: false,
      default:{
        id:'AVB',
        client:'客户A',
        subscriptList:['项目A','项目B','项目C','项目D'],
        dateList:[25,10,56,10],
        array:[
          { value: 25, name: '项目A' },
          { value: 10, name: '项目B' },
          { value: 56, name: '项目C' },
          { value: 10, name: '项目D' }
        ]
      }
    }
  },
  methods:{
    initialize(obj){
      let chartDom = document.getElementById(this.barChart.id);
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{a} <br/>{b}回收率 : {c}%'
        },
        grid: {
          left: '15%',
          right: '4%',
          bottom: '8%',
        },
        xAxis: [
          {
            type: 'category',
            data: obj.subscriptList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value} %'
            },
          }
        ],
        series: [
          {
            name: obj.client,
            type: 'bar',
            barWidth: '40%',
            data: obj.dateList,
            /*itemStyle: {
              normal: {
                  color:function(d){
                    return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                    },
                color: function(params) {
                  var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
                  return colorList[params.dataIndex]
                }

              }
            }*/
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',//数据在中间显示
                  formatter:'{c}%'//百分比显示
                }
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);


    },
  },
  mounted() {
    this.initialize(this.barChart)
  }
}
</script>

<style scoped>
.main{
  width: 45vh;
  height: 35vh;
  margin-left: 3%;
}
.title{
  padding-top: 20px;
  text-align: center;
}
::v-deep .ant-card-meta-title{
  font-size: 2vh;
}
</style>